import { DatePicker, Form, Input, Select, TreeSelect } from "antd";
import { PropsWithChildren } from "react";
import { fetchIssuingOrgan, fetchPotencyLevel, fetchTimeliness } from "../api";
import { useRequest } from "ahooks";
import { FormInstance } from "antd/lib";

interface IFilterFormLawsAndRegulationsProps {
  className?: string;
  form?: FormInstance<any>;
}
export function FilterFormLawsAndRegulations(
  props: PropsWithChildren<IFilterFormLawsAndRegulationsProps>
) {
  const { form } = props;

  const { data: potencyLevelList } = useRequest(() => fetchPotencyLevel());
  const { data: issuingOrganList } = useRequest(() => fetchIssuingOrgan());
  const { data: timelinessList } = useRequest(() => fetchTimeliness());
  return (
    <Form
      form={form}
      layout="inline"
      className="filterForm"
      onValuesChange={(a, b) => console.log(a, b)}
    >
      <div className="flex flex-row w-full">
        <div className="flex-1">
          <Form.Item name="keyword" label="关键字">
            <Input placeholder="请输入" />
          </Form.Item>
        </div>
        <div className="flex-1">
          <Form.Item name="category" label="效力级别">
            <TreeSelect
              treeData={potencyLevelList}
              placeholder="请选择"
              fieldNames={{ label: "name", value: "name" }}
              treeCheckable
              allowClear
              maxTagCount={4}
              showCheckedStrategy={"SHOW_PARENT"}
            />
          </Form.Item>
        </div>
        <div className="flex-1">
          <Form.Item name="platform" label="发文机关">
            <TreeSelect
              treeData={issuingOrganList}
              placeholder="请选择"
              fieldNames={{ label: "name", value: "name" }}
              treeCheckable
              allowClear
              maxTagCount={4}
              showCheckedStrategy={"SHOW_PARENT"}
            />
          </Form.Item>
        </div>
      </div>
      <div className="flex flex-row w-full mt-[24px]">
        <div className="flex-1">
          <Form.Item name="publish_date" label="发布年份">
            <DatePicker.RangePicker allowClear picker="year" />
          </Form.Item>
        </div>
        <div className="flex-1">
          <Form.Item name="basic_implementYear" label="实施年份">
            <DatePicker.RangePicker allowClear picker="year" />
          </Form.Item>
        </div>
        <div className="flex-1">
          <Form.Item name="basic_implementliness" label="时效性">
            <Select allowClear options={timelinessList} placeholder="请选择" />
          </Form.Item>
        </div>
      </div>
    </Form>
  );
}
